<template>
	<scroll-view show-scrollbar="false">
		<!-- 头像区域 -->
		<view class='su-center-bg'>
			<image :src='headData.img' 
					class='su-head-img' 
					mode='aspectFill' 
					@click='showActionSheet=true'></image>
			<view class='text-xl'> 
				<text>{{headData.name}}</text> 
				<text :class="['iconfont',showSex]" v-if='headData'></text>
			</view> 
			<image src='https://gitee.com/476743842/app_image/raw/master/my/wave.gif' 
				   mode='scaleToFill' class='gif-wave'></image>
		</view>
		<!-- 发任务密码修改等 -->
		<view class='info-buttons'>
			<view class='su-flex su-button-active '>
				<view class="margin20 su-border2 right-border">
					<text class='iconfont'>&#xe694;</text>
					<text>发任务</text>
				</view>
			</view>
			<view class='su-flex su-button-active' 
				  data-url="/pages/system/user/password/update"
				  @click="_toView">
				<view class="margin20">
					<text class='iconfont'>&#xe692;</text>
					<text>密码修改</text>
				</view>
			</view>
		</view>
		<!-- 信息列表区 -->
		<view class="uni-card su-list"> 
			<view class="uni-list">
				<view class="uni-list-cell" >
					<view class="su-list-icon">
						<text class='iconfont' style='color:#31BBFF;'>&#xe6a2;</text>
					</view>
					<view class="uni-list-cell-navigate">
						<text class="text-title">所属机构</text>
						<text class='text-content text-sm'>{{infoData.currentOgnName}}</text>
					</view>
				</view>
				<view class="uni-list-cell" >
					<view class="su-list-icon">
						<text class='iconfont' style='color:#30C462;'>&#xe69d;</text>
					</view>
					<view class="uni-list-cell-navigate">
						<text class="text-title">所属部门</text>
						<text class='text-content text-sm'>
							{{infoData.currentDeptName||"未设置所属部门"}}
						</text>
					</view>
				</view>
				<view class="uni-list-cell" >
					<view class="su-list-icon">
						<text class='iconfont' style='color:#FAA727;'>&#xe696;</text>
					</view>
					<view class="uni-list-cell-navigate">
						<text class="text-title">当前岗位</text>
						<text class='text-content text-sm'>{{infoData.currentPositionName}}</text>
					</view>
				</view>
				<view class="uni-list-cell" @click="_showModel" data-bind="mobilePhoneNum" 
					data-poptitle="手机号码" data-poppl="请输入手机号码">
					<view class="su-list-icon">
						<text class='iconfont' style='color:#31BBFF;'>&#xe698;</text>
					</view>
					<view class="uni-list-cell-navigate uni-navigate-right">
						<text class="text-title">手机号码</text>
						<text class='text-content text-sm'>{{infoData.mobilePhoneNum||"未填写"}}</text>
					</view>
				</view>
				<view class="uni-list-cell" @click="_showModel" data-bind="mail" 
					data-poptitle="电子邮箱" data-poppl="请输入电子邮箱">
					<view class="su-list-icon">
						<text class='text-grey iconfont' 
							  style='color:#F15A49;font-size:30upx;'>&#xe69b;</text>
					</view>
					<view class="uni-list-cell-navigate uni-navigate-right">
						<text class="text-title">电子邮箱</text>
						<text class='text-content text-sm'>{{infoData.mail||"未填写"}}</text>
					</view>
				</view>
				<view class="uni-list-cell" @click="_showModel" data-bind="sqq" 
					data-poptitle="QQ" data-poppl="请输入QQ">
					<view class="su-list-icon">
						<text class='text-grey iconfont' style='color:#31BBFF;'>&#xe69e;</text>
					</view>
					<view class="uni-list-cell-navigate uni-navigate-right">
						<text class="text-title">QQ</text>
						<text class='text-content text-sm'>{{infoData.sqq||"未填写"}}</text>
					</view>
				</view>
				<view class="uni-list-cell" @click="_showModel" data-bind="sfamilyaddress"
					  data-poptitle="居住地址" data-poppl="请输入居住地址">
					<view class="su-list-icon">
						<text class='iconfont' style='color:#888;'>&#xe697;</text>
					</view>
					<view class="uni-list-cell-navigate uni-navigate-right">
						<text class="text-title">居住地址</text>
						<text class='text-content text-sm'>{{infoData.sfamilyaddress||"未填写"}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹出组件 -->
		<actionsheet tips="请选择" :show="showActionSheet"
					 :item-list="sheetData" @click="_sheetClick"
					 @cancel="showActionSheet=false"></actionsheet>
		<!-- 图片裁切 -->
		<cropper :src="originalFaceSrc"
				 @confirm="_imgConfirm" @cancel="originalFaceSrc=''"></cropper> 
		<!-- 弹出框 -->
		<modal :show="showModel" @cancel="showModel=false" :custom="true" :fadein="true">
			<view class="su-modal-custom">
				<view class="su-prompt-title">{{popData.title}}</view>
				<input type="text" :placeholder="popData.pl" class="su-input" v-model="popData.content" />
				<button class="su-button su-input-button" 
						@click="_modelOk">{{popData.type=='edit'?'完成修改':'确定'}}</button>
			</view>
		</modal>
		<message ref="message"></message>
	</scroll-view> 
</template>

<script>
	/**
	 * 个人资料页
	 */
	import imageTools from "@/plugins/jssdk/image-tools/index"
	/*导入组件*/
	import actionsheet from "@/components/su-saui/su-actionsheet/actionsheet"
	import cropper from "@/components/su-saui/su-cropper/cropper" 
	import modal from "@/components/su-system/modal"
	export default {
		components:{
			actionsheet,
			cropper,
			modal
		},
		data() {
			return {
				headData: {},
				infoData:{},
				popData:{},
				sheetData:[],
				originalFaceSrc:"",
				showModel:false,			//是否显示对话框
				showActionSheet:false		//是否显示sheet
			};
		}, 
		computed:{
			showSex(){
				if(this.headData['sex']=="男") 
					return "icon-nan su-icon-boy"
				else if(this.headData['sex']=="女") 
					return "icon-nv su-icon-girl"
			}
		},
		onLoad() {
			this.init()
			/*初始化data */ 
			this._personData = uni.simpleData.creat("personData",this._baseInfoConfig)
			/*获取上下文 */
			this._context = uni.core.getContext()
			this.infoData = {...this._context}
			this._bid = uni.core.bsessionid
			this._currentPersonID = this._context['currentPersonID']
			/*加载头像 */
			this._loadHead(this._context, this._bid)
			/*加载个人资料*/ 
			this._loadPersonInfo()
		},
		onPullDownRefresh(){
			setTimeout(()=>{
				uni.stopPullDownRefresh()
				uni.core.message("刷新成功")
			},1000)
		},
		methods:{
			/*加载头像 */
			_loadHead (_context, _bid) {
			    var time = new Date().getTime()
				var _url = ""
				if(uni.p9version=="clound") {
					_url = "{0}"+uni.api.get("currentPhoto")+"?bsessionid={1}&t={2}"
				}else{
					_url = "{0}"+uni.api.get("downloadUserPhoto")+"?bsessionid={1}&t={2}"
				}
				_url = uni.core.strFormat(_url,uni.core.rootPath,_bid,time)
			    this.headData = {
					name: _context['currentPersonName'],
					img: _url
			    }
			},
			/*加载个人信息*/
			_loadPersonInfo(){
			    var pData = this._personData
			    /* 在使用simpleData时,再动态设置对应的值即可 */
			    this._baseInfoConfig.queryAction.param.id = this._currentPersonID
			    pData.refreshData((data, flag, msg) =>{
			      if (flag == true) {
			        pData.selectRow(data[0]['id'])
					this.headData = {
						...this.headData,
						sex:pData.getValue("sex")
					}
					/*设置个人信息*/
					this.infoData = {
						...this.infoData,
						...data[0]
					}
			      } else {
			        uni.core.message("个人数据加载失败","error")
			      }
			    })
			},
			/*弹出框的回调*/
			_sheetClick(itemIndex){
				var {index} = itemIndex
				switch (index*1){
					case 0:
						uni.previewImage({
							urls:[this.headData['img']]
						})
						break
					case 1:
						this.popData = {
							type:"input",
							title:"QQ号码",
							pl:"请输入QQ号码",
							content:""
						}
						this.showModel = true
						break
					case 2:
						this._chooseImage("camera")
						break
					case 3:
						this._chooseImage("album")
						break
				}
				this.showActionSheet = false
			},
			/*选择图片*/
			_chooseImage(type){
			    var _this = this;
			    uni.chooseImage({
			      count: 1,
			      sourceType: [type],
			      success: function (res) {
					 /**
					  * 注释的代码为直接上传图片的代码
					  */
					//#ifdef MP-QQ || MP-WEIXIN
					// uni.getFileSystemManager().readFile({
					// 	filePath: res.tempFilePaths[0], //选择图片返回的相对路径
					// 	encoding: 'base64', //编码格式
					// 	success: res => { //成功的回调
					// 		_this._uploadImage(res.data)
					// 	},fail:res=>{
					// 		uni.core.message(_this,"头像上传失败","error")
					// 	}
					// })
					//#endif 
					//#ifdef APP-PLUS || H5
					// _this.showCropper = true;
					// imageTools.pathToBase64(res.tempFilePaths[0])
					//   .then(base64 => {
					// 	//_this._uploadImage(base64.split(",")[1])
					//   })
					//   .catch(error => {
					//     uni.core.message(_this,"头像上传失败","error")
					//   })
					//#endif
					_this.originalFaceSrc = res.tempFilePaths.shift();
			      },
			      fail: function () {
			        uni.hideLoading()
			      }
			    });
			},  
			_imgConfirm(e){
				var _this = this;
				this.originalFaceSrc = ""
				//#ifdef H5
					var base64Data = e.detail.tempFilePath
					base64Data = base64Data.split(",")[1]
					this._uploadImage(base64Data)
				//#endif
				//#ifdef APP-PLUS || MP
					imageTools.pathToBase64(e.detail.tempFilePath)
					  .then(base64 => {
						_this._uploadImage(base64.split(",")[1])
					  })
					  .catch(error => {
					    uni.core.message(_this,"头像上传失败","error")
					})
				//#endif
			},
			/*上传头像*/
			_uploadImage(base64Data){
				uni.showLoading({title:"头像上传..."})
				uni.core.post(uni.api.get("uploadUserPhoto"), { 
					photoBase64: base64Data,
				}, (data, flag, mes)=> {
				  uni.core.message("头像上传成功","success")
				  this._loadHead(this._context, this._bid)
				  uni.setStorageSync("updateHead", "true")
				  uni.hideLoading()
				});
			},
			/*显示修改弹出*/
			_showModel(e){
				var {bind,poptitle,poppl,} = e.currentTarget.dataset;
				this.popData = {
					type:"edit",
					title:poptitle,
					pl:poppl,
					content:this.infoData[bind]||'',
					bind:bind
				}
				this.showModel = true
			},
			_modelOk(){
				var data = this._personData
				var {bind,content,type} = this.popData
				if(type=="edit") {
					data.setValue(bind,content)
					data.save((flag,msg)=>{
						if(flag){
							this.infoData[bind] = content
							uni.core.message("修改成功")
						}else{
							uni.core.message("修改失败:"+msg,"error")
						}
					})
				}
				this.showModel = false;
			},
			/*定义一些配置变量 */
			init(){
				this._context = null,this._bid = null,this._personData=null,
				this._currentPersonID = null
				/*p9action配置*/
				this._baseInfoConfig = {
				    queryAction: {
				      url: uni.api.get("queryPerson"),
				      param: {
				        id: ""   /* 一开始配置时参数不能有值只能动态的设置 */
				      } 
				    },
				    saveAction: {
				      url: uni.api.get("savePerson")
				    }
				}
				/*弹出窗口配置*/
				this.sheetData = ["查看大头像","同步QQ头像","拍照","从相册选择"]
			},
			_toView:uni.core.openPage
		}
	}
</script>

<style lang="scss">
	@import "./index.scss";
</style>
